<!-----Print screen Javascript---->

<script language="javascript">
function Print()
{
	document.print.submit();
        document.getElementById('printbutton').style.display='none';
	window.print();
}
</script>
<!-- Print Screen Javascript ends--->

<?php
echo $this->javascript->link(array('jquery', 'tag/jquery.cookie', 'tag/jquery.hotkeys', 'tag/jquery.jstree'));

echo $this->Html->css('treestyle');
$vendorfolder = Configure::corePaths('vendor');

$vendorFilePath = "";
?>
<style type="text/css">

.selected {background:#477FAE;color:#fff;}
    .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }

    #demo { width:970px; height:0 auto; min-height: 400px; overflow:auto; border:1px solid gray; }

    #text { margin-top:1px; }

    #alog { font-size:9px !important; margin:5px; border:1px solid silver; }
</style>



<div id="mmenu" style="height:40px; overflow:auto;" class="noprint" >
    <input type="button" id="add_tag" value="Add Tag"  style="display:block; float:left;width: 176px;"/>
    <input type="button" id="add_attribute" value="Add Attribute" style="display:block; float:left;"/>
    <input type="button" id="rename" value="Rename" style="display:block; float:left;"/>
    <input type="button" id="remove" value="Remove" style="display:block; float:left;"/>
    <input type="button" id="cut" value="Cut" style="display:block; float:left;"/>
    <input type="button" id="copy" value="Copy" style="display:block; float:left;"/>
    <input type="button" id="paste" value="Paste" style="display:block; float:left;"/>
    <input type="button" id="clear_search" value="Clear" style="display:block; float:right;"/>
    <input type="button" id="search" value="Search" style="display:block; float:right;"/>
    <input type="text" id="text" value="" style="display:block; float:right;" />
</div>

<!-- the tree container (notice NOT an UL node) -->
<div id="demo" class="demo"></div>

<script type="text/javascript">
    $(function () {
        // Settings up the tree - using $(selector).jstree(options);
        // All those configuration options are documented in the _docs folder
        $("#demo")
        .jstree({ 
            // the list of plugins to include
            "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ],
            // Plugin configuration

            // I usually configure the plugin that handles the data first - in this case JSON as it is most common
            "json_data" : { 
                // I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
                // All the options are the same as jQuery's except for `data` which CAN (not should) be a function
                "ajax" : {
                    // the URL to fetch the data
                    "url" : "tags/server",
                    // this function is executed in the instance's scope (this refers to the tree instance)
                    // the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
                    "data" : function (n) { 
                        // the result is fed to the AJAX request `data` option
                        return { 
                            "operation" : "get_children", 
                            "id" : n.attr ? n.attr("id").replace("node_","") : 1 
                        }; 
                    }
                }
            },
            // Configuring the search plugin
            "search" : { 
                // As this has been a common question - async search
                // Same as above - the `ajax` config option is actually jQuery's object (only `data` can be a function)
                "ajax" : {
                    "url" : "tags/server",
                    // You get the search string as a parameter
                    "data" : function (str) {
                        return { 
                            "operation" : "search", 
                            "search_str" : str 
                        };
                    }
                }
            },
            // Using types - most of the time this is an overkill
            // Still meny people use them - here is how
            "types" : {
                // I set both options to -2, as I do not need depth and children count checking
                // Those two checks may slow jstree a lot, so use only when needed
                "max_depth" : -2,
                "max_children" : -2,
                // I want only `drive` nodes to be root nodes 
                // This will prevent moving or creating any other type as a root node
                "valid_children" : [ "drive" ],
                "types" : {
                    // The default type
                    "attribute" : {
                        // I want this type to have no children (so only leaf nodes)
                        // In my case - those are files
                        "valid_children" : "none",
                        // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                        "icon" : {
                            "image" : "../img/tag/file.png"
                        }
                    },
                    // The `folder` type
                    "tag" : {
                        // can have files and other folders inside of it, but NOT `drive` nodes
                        "valid_children" : [ "attribute", "tag" ],
                        "icon" : {
                            "image" : "../img/tag/tag.png"
                        }
                    },
                    // The `drive` nodes 
                    "drive" : {
                        // can have files and folders inside, but NOT other `drive` nodes
                        "valid_children" : [ "attribute", "tag" ],
                        "icon" : {
                            "image" : "../img/tag/root.png"
                        },
                        // those options prevent the functions with the same name to be used on the `drive` type nodes
                        // internally the `before` event is used
                        "start_drag" : false,
                        "move_node" : false,
                        "delete_node" : false,
                        "remove" : false
                    },
                    "tagmain" : {
                        // can have files and folders inside, but NOT other `drive` nodes
                        "valid_children" : [ "attribute", "tag" ],
                        "icon" : {
                            "image" : "../img/tag/tag.png"
                        },
                        // those options prevent the functions with the same name to be used on the `drive` type nodes
                        // internally the `before` event is used
                        "start_drag" : false,
                        "move_node" : false,
                        "delete_node" : false,
                        "remove" : false
                    }
                }
            },
            // For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

            // the UI plugin - it handles selecting/deselecting/hovering nodes
            "ui" : {
                // this makes the node with ID node_4 selected onload
                "initially_select" : [ "node_13" ]
            },
            // the core plugin - not many options here
            "core" : { 
                // just open those two nodes up
                // as this is an AJAX enabled tree, both will be downloaded from the server
                "initially_open" : [ "node_13" ] 
            }
        })
        .bind("create.jstree", function (e, data) {
            $.post(
            "tags/server", 
            { 
                "operation" : "create_node", 
                "id" : data.rslt.parent.attr("id").replace("node_",""), 
                "position" : data.rslt.position,
                "title" : data.rslt.name,
                "type" : data.rslt.obj.attr("rel")
            }, 
            function (r) {
                if(r.status) {
                    $(data.rslt.obj).attr("id", "node_" + r.id);
                }
                else {
                    $.jstree.rollback(data.rlbk);
                }
            }
        );
                            
        })
        .bind("remove.jstree", function (e, data) {
            if(!confirm("Are you sure you want to delete?")){
                data.inst.refresh();
                return false;
            }else{
                        
                data.rslt.obj.each(function () {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "tags/server",
                        data : { 
                            "operation" : "remove_node", 
                            "id" : this.id.replace("node_","")
                        }, 
                        success : function (r) {
                            if(!r.status) {
                                data.inst.refresh();
                            }
                        }
                    });
                });
            } 
        })
        .bind("rename.jstree", function (e, data) {
            $.post(
            "tags/server", 
            { 
                "operation" : "rename_node", 
                "id" : data.rslt.obj.attr("id").replace("node_",""),
                "title" : data.rslt.new_name
            }, 
            function (r) {
                if(!r.status) {
                    $.jstree.rollback(data.rlbk);
                }
            }
        );
        })
        .bind("move_node.jstree", function (e, data) {
            data.rslt.o.each(function (i) {
                $.ajax({
                    async : false,
                    type: 'POST',
                    url: "tags/server",
                    data : { 
                        "operation" : "move_node", 
                        "id" : $(this).attr("id").replace("node_",""), 
                        "ref" : data.rslt.np.attr("id").replace("node_",""), 
                        "position" : data.rslt.cp + i,
                        "title" : data.rslt.name,
                        "copy" : data.rslt.cy ? 1 : 0
                    },
                    success : function (r) {
                        if(!r.status) {
                            $.jstree.rollback(data.rlbk);
                        }
                        else {
                            $(data.rslt.oc).attr("id", "node_" + r.id);
                            if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
                                data.inst.refresh(data.inst._get_parent(data.rslt.oc));
                            }
                        }
                        $("#analyze").click();
                    }
                });
            });
                        
        });
    });
</script>

<script type="text/javascript">
    $(function () { 
        $("#mmenu input").click(function () {
            switch(this.id) {
                case "add_attribute":
                case "add_tag":
                    $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
                    break;
                case "search":
                    $("#demo").jstree("search", document.getElementById("text").value);
                    break;
                case "text": break;
                default:
                    $("#demo").jstree(this.id);
                    break;
            }
        });
    });
    $(":button").click(function(){$(":button").removeClass('selected');$(this).addClass('selected')});
</script>

<!--- ***********************************   This will be used to print screen        *************************************/--->

<div style="margin-top:31px; margin-left:3px;">
    <form name="print" method="POST" action="">
        <input type="submit" id="printbutton" name="print" value="Print" style="width:60px; height:30px;" onclick="Print();" />
    </form>
</div>	
<!---************************************************************************/--->